{% extends "base.html" %}

{% block title %}工具箱 - 图片处理工具{% endblock %}

{% block content %}
    <!-- 页面标题 -->
    <div class="bg-blue-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">图片处理工具</h1>
                    <p class="mt-2">各种实用的图片处理工具，提高图片编辑和处理效率</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="{{ url_for('main.index') }}" class="hover:underline">首页</a>
                        <span>/</span>
                        <span class="font-medium">图片工具</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 工具列表 -->
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for tool in tools %}
            <a href="{{ url_for('image_tools.' + tool.slug|replace('-', '_')) }}" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                <div class="bg-blue-100 p-4 flex justify-center">
                    <i class="{{ tool.icon }} text-blue-600 text-3xl"></i>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">{{ tool.name }}</h3>
                    <p class="text-gray-600 text-sm">{{ tool.description }}</p>
                </div>
            </a>
            {% endfor %}
        </div>
        
        <!-- 工具使用提示 -->
        <div class="mt-12 bg-blue-50 rounded-lg p-6">
            <h2 class="text-xl font-bold text-blue-800 mb-4">图片工具使用小贴士</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="flex items-start">
                    <div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
                        <i class="fas fa-lightbulb text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-blue-700 mb-1">批量处理</h3>
                        <p class="text-blue-600 text-sm">部分图片工具支持批量处理，您可以一次性上传多张图片进行处理。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
                        <i class="fas fa-save text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-blue-700 mb-1">保存结果</h3>
                        <p class="text-blue-600 text-sm">处理完成后，您可以直接下载处理后的图片，或复制到剪贴板。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
                        <i class="fas fa-history text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-blue-700 mb-1">历史记录</h3>
                        <p class="text-blue-600 text-sm">登录用户可以查看历史操作记录，方便您重新使用或参考之前处理过的图片。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-blue-100 rounded-full p-2 mt-1 mr-3">
                        <i class="fas fa-lock text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-blue-700 mb-1">数据安全</h3>
                        <p class="text-blue-600 text-sm">所有图片处理均在本地完成，您的图片不会上传至服务器，保障您的数据安全。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %} 